<template>
	<div class="system-role-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="60%" destroy-on-close v-if="state.dialog.isShowDialog">
			<el-form ref="paperDialogFormRef" :model="state.ruleForm" size="default" label-width="100px" :rules="state.rules">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="标题" prop="title">
							<el-input v-model="state.ruleForm.title" placeholder="请输入标题" clearable :disabled="state.type === 'view'"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="英文标题" prop="en_title">
							<el-input v-model="state.ruleForm.en_title" placeholder="请输入英文呢标题" clearable :disabled="state.type === 'view'"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="描述" prop="description">
							<el-input
								v-model="state.ruleForm.description"
								type="textarea"
								placeholder="请输入描述"
								maxlength="150"
								:disabled="state.type === 'view'"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="链接" prop="url">
							<el-input v-model="state.ruleForm.url" placeholder="请输入链接" clearable :disabled="state.type === 'view'"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="分类" prop="cateids">
							<el-cascader
								:options="state.cateList"
								:props="{ checkStrictly: true, value: 'id', label: 'name' }"
								placeholder="请选择分类"
								clearable
								class="w100"
								v-model="state.ruleForm.cateids"
								:disabled="state.type === 'view'"
								ref="cateRef"
							>
								<template #default="{ node, data }">
									<span>{{ data.name }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="图片" prop="img">
							<UploadFile
								@uploadSuccess="uploadSuccess"
								@uploadRemove="uploadRemove"
								:limit="1"
								acceptSuffix=".bmp,.jpg,.png"
								:imgList="state.fileList"
								:isDisabled="state.type === 'view'"
							></UploadFile>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="状态" prop="status">
							<el-switch
								v-model="state.ruleForm.status"
								inline-prompt
								active-text="启用"
								inactive-text="禁用"
								active-value="normal"
								inactive-value="disable"
								:disabled="state.type === 'view'"
							></el-switch>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="中文内容" prop="content">
							<Editor v-model:get-html="state.ruleForm.content" :readOnly="state.type === 'view'" key="conent_zh" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="英文内容" prop="en_content">
							<Editor v-model:get-html="state.ruleForm.en_content" :readOnly="state.type === 'view'" key="conent_en" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="移动内容" prop="m_content">
							<Editor v-model:get-html="state.ruleForm.m_content" :readOnly="state.type === 'view'" key="m_conent_zh" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="移动英文内容" prop="m_en_content">
							<Editor v-model:get-html="state.ruleForm.m_en_content" :readOnly="state.type === 'view'" key="m_conent_en" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default" v-show="state.type != 'view'">{{ state.dialog.submitTxt }}</el-button>
					<el-button @click="preview('content')" size="default">客户端预览</el-button>
					<el-button @click="preview('m_content')" size="default">移动端预览</el-button>
				</span>
			</template>
		</el-dialog>
		<el-drawer
			title="预览"
			v-model="state.isDrawer"
			direction="rtl"
			destroy-on-close
			@close="onDrawerClose"
			size="100%"
		>
			<preview-page :content="state.drawerContent" :type="state.drawerType"></preview-page>
		</el-drawer>
	</div>
</template>

<script setup lang="ts" name="systemRoleDialog">
import { reactive, ref, nextTick, defineAsyncComponent, onMounted } from 'vue';
import { topicDetail, addTopic, updateTopic } from '/@/api/topic';
import { treeList } from '/@/api/cate';
import { ElMessage } from 'element-plus';

const UploadFile = defineAsyncComponent(() => import('/@/components/uploadFile/index.vue'));
// 引入组件
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
const PreviewPage = defineAsyncComponent(() => import('/@/views/previewPage/index.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义父组件向子组件传值
const props = defineProps({
	id: { type: Number, required: false, default: 0 },
});

// 定义变量内容
const paperDialogFormRef = ref();
const cateRef = ref();
const state = reactive({
	isDrawer: false,
	drawerContent: '',
	drawerType: '',
	id: 0,
	type: '',
	fileList: <EmptyArrayType>[],
	ruleForm: <EmptyObjectType>{
		status: 'normal',
		// id: 0,
		// cateid: 0,
		// catename: '',
		// description: '',
		// img: '',
		// status: 'normal',
		// title: '',
	},
	rules: {
		cateids: [
			{
				required: true,
				message: '请选择分类',
				trigger: 'change',
			},
		],
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	cateList: [],
	cateQuery: {
		sort: 'sort',
		order: 'asc',
	},
});

// 打开弹窗
const openDialog = (type: string, id: number) => {
	if (type === 'edit') {
		state.id = id;
		state.dialog.title = '修改';
		state.dialog.submitTxt = '修 改';
		state.fileList = [];
		state.ruleForm = <EmptyObjectType>{};
	} else if (type === 'add') {
		state.id = 0;
		state.dialog.title = '新增';
		state.dialog.submitTxt = '新 增';
		state.fileList = [];
		state.ruleForm = <EmptyObjectType>{};
	} else {
		state.id = id;
		state.dialog.title = '详情';
		state.dialog.submitTxt = '查 看';
	}
	state.type = type;
	state.dialog.isShowDialog = true;
	// 清空表单，此项需加表单验证才能使用
	nextTick(() => {
		paperDialogFormRef.value.resetFields();
		paperDialogFormRef.value.clearValidate();
	});
	if (id) {
		getPaperDetail();
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {
	paperDialogFormRef.value.validate((valid: boolean, fields: EmptyArrayType) => {
		if (valid) {
			let cateidData = cateRef.value.getCheckedNodes();
			state.ruleForm.cateid = cateidData[0].value;
			state.ruleForm.catename = cateidData[0].label;
			if (state.id) {
				updateTopic(state.ruleForm).then((res: any) => {
					if (res.status === 'success') {
						closeDialog();
						emit('refresh');
					} else {
						ElMessage.error(res.msg);
					}
				});
			} else {
				addTopic(state.ruleForm).then((res: any) => {
					if (res.status === 'success') {
						closeDialog();
						emit('refresh');
					} else {
						ElMessage.error(res.msg);
					}
				});
			}
		} else {
			return false;
		}
	});
};
// 获取详情数据
const getPaperDetail = () => {
	topicDetail(state.id).then((res: any) => {
		if (res.status === 'success') {
			let cateids = res.data.cateids ? res.data.cateids.split(',') : [];
			res.data.cateids = cateids.map((s) => {
				let num = Number(s);
				return isNaN(num) ? null : num; // 或者你可以选择替换为其他默认值或抛出错误
			});
			state.ruleForm = res.data;
			state.fileList = res.data.img ? [{ url: res.data.img }] : [];
		} else {
			ElMessage.error(res.msg);
		}
	});
};

// 上传成功
const uploadSuccess = (res: any, file: any) => {
	if (res.length > 0) {
		state.ruleForm.img = res[0].url;
	}
};
// 删除图片
const uploadRemove = (res: any, file: any) => {
	state.ruleForm.img = '';
};

const initData = () => {
	treeList(state.cateQuery).then((res: any) => {
		if (res.status === 'success') {
			state.cateList = res.data;
		}
	});
};

const preview = (type: string) => {
	state.isDrawer = true;
	state.drawerContent = state.ruleForm[type];
	state.drawerType = type;
};

const onDrawerClose = () => {
	state.isDrawer = false;
}

// 暴露变量
defineExpose({
	openDialog,
});

// 页面加载时
onMounted(() => {
	initData();
});
</script>

<style scoped lang="scss">
.system-role-dialog-container {
	.menu-data-tree {
		width: 100%;
		border: 1px solid var(--el-border-color);
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}

:deep .el-drawer__body {
  background-color: #f8f8f8;
}
</style>
